<template>
    <div class="personal-info-index">
        <a-spin :tip="tipText" :spinning="spinning">
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="个人基本信息">
                    <div class="personal-info-content" style="background-color: #f0f2f5;">
                        <div :key="basicInformationKey" style="width: 100%;">
                            <div style="display: flex;width: 100%;" >
                                <div style="width: 20%;min-width: 300px;">
                                    <a-card title="个人信息" class="personal-info-b-card" style="height: 100%;" size="small">
                                        <a-form layout="inline" class="personal-info-form ben-personal-info" :form="form">
                                            <a-form-item label="真实姓名">
                                                <a-input placeholder="请输入真实姓名" v-model:value="fromState.realname"/>
                                            </a-form-item>
                                            <a-form-item label="性别">
                                                <compSelector
                                                    :key="compSelectorkey"
                                                    :width="182"
                                                    v-model="fromState.sex"
                                                    :defaultValue="fromState.sex"
                                                    compType="Select"
                                                    dictionaryType="性别"
                                                />
                                            </a-form-item>
                                            <a-form-item label="民族">
                                                <a-input placeholder="请输入民族" v-model:value="fromState.fmz"/>
                                            </a-form-item>
                                            <a-form-item label="政治面貌">
                                                <a-input placeholder="请输入政治面貌" v-model:value="fromState.fzzmm"/>
                                            </a-form-item>
                                            <a-form-item label="登录账号">
                                                <a-input disabled placeholder="请输入登录账号" v-model:value="fromState.username"/>
                                            </a-form-item>
                                            <a-form-item label="手机号码">
                                                <a-input 
                                                disabled
                                                placeholder="请输入手机号码" 
                                                v-model:value="fromState.phone"
                                                />
                                                <!-- v-decorator="['phone', { initialValue:fromState.phone, rules: rules.phone}]" -->
                                            </a-form-item>
                                            <a-form-item label="身份证号">
                                                <!-- <a-input style="width: 0;height: 0;border: 0;padding: 0;"/>
                                                <a-input-password style="width: 0;height: 0;border: 0;padding: 0;" :visibilityToggle="false"/>
                                                <a-input-password
                                                placeholder="请输入身份证号" 
                                                v-model:value="fromState.fsfzh" 
                                                v-decorator="['fsfzh', { initialValue:fromState.fsfzh, rules: rules.fsfzh}]"
                                                /> -->
                                                <a-input
                                                    disabled
                                                    placeholder="请输入身份证号" 
                                                    v-model:value="fromState.fsfzh" 
                                                />
                                            </a-form-item>
                                            <a-form-item label="电子邮箱">
                                                <a-input placeholder="请输入电子邮箱" v-model:value="fromState.email"/>
                                            </a-form-item>
                                        </a-form>
                                        <div style="display: flex;">
                                            <div style="margin: 10px 0;margin-right: 15px;">
                                                <a-button
                                                    class="blue-btn" 
                                                    type="primary" 
                                                    @click="exportSignature"
                                                >
                                                    <a-icon type="download" />
                                                    导出个人签名
                                                </a-button>
                                            </div>
                                            <div style="margin: 10px 0;">
                                                <a-upload style="display: inline-block;" :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="importSignature">
                                                    <a-button class="blue-btn" type="default"  icon="import">导入个人签名</a-button>
                                                </a-upload>
                                            </div>
                                            <div>

                                            </div>
                                            <!-- <a-button
                                                style="margin: 0 15px;" 
                                                class="blue-btn" 
                                                type="primary" 
                                                @click="importSignature"
                                            >
                                                <a-icon type="import" />
                                                导入个人签名
                                            </a-button> -->
                                            <!-- <a-button
                                                v-if="editOrNot"
                                                style="margin: 10px 15px;"
                                                class="blue-btn" 
                                                type="primary" 
                                                @click="resetPassword"
                                            >
                                                重置密码
                                            </a-button>
                                            <a-button
                                                v-if="editOrNot"
                                                class="blue-btn" 
                                                type="primary" 
                                                @click="modifyAccount"
                                            >
                                                修改账号
                                            </a-button>
                                            <a-button
                                                v-if="editOrNot"
                                                style="margin: 10px 0;margin-left: 15px;" 
                                                class="blue-btn" 
                                                type="primary" 
                                                @click="modifyDuty"
                                            >
                                                修改执勤状态
                                            </a-button> -->
                                        </div>
                                        <div style="display: flex;justify-content: center;">
                                            <a-button class="blue-btn" type="primary" @click="saveClick({
                                                realname:fromState.realname,sex:fromState.sex,
                                                fmz:fromState.fmz,fzzmm:fromState.fzzmm,
                                                email:fromState.email,fxl:fromState.fxl,fsxzy:fromState.fsxzy,
                                                fbyyx:fromState.fbyyx,fcsgz:fromState.fcsgz,
                                                fzw:fromState.fzw,fzc:fromState.fzc,
                                                fdwlx:fromState.fdwlx,fdwdh:fromState.fdwdh,
                                                fdwyx:fromState.fdwyx,fgzdw:fromState.fgzdw,
                                                fgzdwdz:fromState.fgzdwdz,fyhkh:fromState.fyhkh,
                                                fkhhszd:fromState.fkhhszd,fkfh:fromState.fkfh,
                                            })">保存</a-button>
                                        </div>
                                    </a-card>
                                </div>
                                <div style="flex: 1;margin-left: 10px;height: 100%;">
                                    <a-card title="教育信息" size="small">
                                        <a-form layout="inline" class="personal-info-form" :form="form">
                                            <a-form-item label="学历">
                                                <a-input placeholder="请输入学历" v-model:value="fromState.fxl"/>
                                            </a-form-item>
                                            <a-form-item label="所学专业">
                                                <a-input placeholder="请输入所学专业" v-model:value="fromState.fsxzy"/>
                                            </a-form-item>
                                            <a-form-item label="毕业院校" class="flex-w-er">
                                                <a-input placeholder="请输入毕业院校" v-model:value="fromState.fbyyx"/>
                                            </a-form-item>
                                            
                                        </a-form>
                                    </a-card>
                                    <a-card title="单位信息" size="small">
                                        <a-form layout="inline" class="personal-info-form" :form="form">
                                            <a-form-item label="从事工作">
                                                <a-input placeholder="请输入从事工作" v-model:value="fromState.fcsgz"/>
                                            </a-form-item>
                                            <a-form-item label="职务">
                                                <a-input placeholder="请输入职务" v-model:value="fromState.fzw"/>
                                            </a-form-item>
                                            <a-form-item label="职称">
                                                <compSelector
                                                    :key="compSelectorkey"
                                                    :width="182"
                                                    v-model="fromState.fzc"
                                                    :defaultValue="fromState.fzc"
                                                    compType="Select"
                                                    dictionaryType="职称"
                                                />
                                            </a-form-item>
                                            <a-form-item label="单位类型">
                                                <compSelector
                                                    :key="compSelectorkey"
                                                    :width="182"
                                                    v-model="fromState.fdwlx"
                                                    :defaultValue="fromState.fdwlx"
                                                    compType="Select"
                                                    dictionaryType="单位类型"
                                                />
                                            </a-form-item>
                                            <a-form-item label="单位电话">
                                                <a-input placeholder="请输入单位电话" v-model:value="fromState.fdwdh"/>
                                            </a-form-item>
                                            <a-form-item label="单位邮箱">
                                                <a-input placeholder="请输入单位邮箱" v-model:value="fromState.fdwyx"/>
                                            </a-form-item>
                                            <a-form-item label="工作单位" class="flex-w-er">
                                                <a-input
                                                placeholder="请输入工作单位" 
                                                v-model:value="fromState.fgzdw"
                                                
                                                />
                                                <!-- v-decorator="['fgzdw', { initialValue:fromState.fgzdw, rules: rules.fgzdw}]" -->
                                            </a-form-item>
                                            <a-form-item>
                                                <a-button style="margin: 0 5px;" class="blue-btn" type="primary" @click="changeWorkUnit('新增',false)">变更工作单位</a-button>
                                                <!-- <a-button class="blue-btn" type="primary" @click="changeWorkUnit('记录',false)">变更工作单位记录</a-button> -->
                                            </a-form-item>
                                            <a-form-item label="工作单位地址" class="flex-w-er">
                                                <a-input placeholder="请输入工作单位地址" v-model:value="fromState.fgzdwdz"/>
                                            </a-form-item>
                                        </a-form>
                                    </a-card>
                                    <a-card title="报账信息" size="small">
                                        <a-form layout="inline" class="personal-info-form" :form="form">
                                            <a-form-item label="银行卡号" class="flex-w-er">
                                                <a-input-password autocomplete="off" placeholder="请输入银行卡号" v-model:value="fromState.fyhkh" :defaultValue="fromState.fyhkh"/>
                                            </a-form-item>
                                            <a-form-item label="开户行所在地" class="flex-w-er">
                                                <a-input placeholder="请输入开户行所在地" v-model:value="fromState.fkhhszd"/>
                                            </a-form-item>
                                            <a-form-item label="开户行">
                                                <compSelector
                                                    :key="compSelectorkey"
                                                    :width="182"
                                                    v-model="fromState.fkfh"
                                                    :defaultValue="fromState.fkfh"
                                                    compType="Select"
                                                    dictionaryType="四大银行"
                                                />
                                            </a-form-item>
                                        </a-form>
                                    </a-card>
                                </div>
                            </div>
                                <!-- <a-form-item label="所属区域">
                                    <a-input placeholder="请输入所属区域" v-model:value="fromState.fssqy"/>
                                </a-form-item> 
                                <a-form-item label="是否药检所人员" class="flex-w-yi">
                                    <compSelector
                                        :key="compSelectorkey"
                                        v-model="fromState.fsfyjsry"
                                        :defaultValue="fromState.fsfyjsry"
                                        compType="Select"
                                        dictionaryType="是否药检所人员"
                                    />
                                </a-form-item>
                                <a-form-item label="聘用文件号">
                                    <a-input placeholder="请输入聘用文件号" v-model:value="fromState.fpywjh"/>
                                </a-form-item>
                                <div style="width: 100%;height: 1px;border-bottom: 1px solid rgb(233, 228, 228);margin: 10px 0;"></div>
                                <a-form-item label="执勤状态">
                                    <compSelector
                                        :key="compSelectorkey"
                                        v-model="fromState.fgzzt"
                                        :defaultValue="fromState.fgzzt"
                                        compType="Select"
                                        dictionaryType="核查员工作状态"
                                    />
                                    <a-input disabled placeholder="请输入执勤状态" v-model:value="fromState.fgzzt"/>
                                </a-form-item>
                                -->
                            
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="工作经历">
                    <div class="personal-info-content">
                        <div style="width:100%;">
                            <commpVxeTable
                            :key="workExperienceKey"
                            :config="workExperienceConfig" 
                            :columns="workExperienceColumnsVxe" 
                            :formItem="formItem"
                            :conditionBtnRow="true"
                            @checkboxChange="workExperiencecheckboxChange"
                            ref="workExperienceRef"
                            @searchEvent="workExperienceSearchEvent"
                            @resetEvent="$event=>{workExperienceConfig.paramet={};workSearchYear=''}"
                            >
                            <template v-slot:year_slotName="{data}">
                                <a-date-picker mode="year" format='YYYY' v-model="workSearchYear" 
                                @panelChange="($event,val)=>{ workSearchYear = $event;workExperienceConfig.paramet={...workExperienceConfig.paramet,year:moment(workSearchYear).format('YYYY')}}" />
                            </template>
                                <template v-slot:externalOperations="{data}">
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="blue-btn" type="primary" @click="addWorkExperience({},false)">添加</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="red-btn" type="primary" @click="deleteWorkExperience()">批量删除</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="blue-btn" type="primary" @click="exportWorkExperience()">导出</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="blue-btn" type="primary" @click="exportTemplateWorkExperience()">导出模板</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-upload style="display: inline-block;" :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="importWorkExperience">
                                                <a-button class="blue-btn" type="primary" >导入</a-button>
                                            </a-upload>
                                        </template>
                                    </vxe-form-item>
                                </template>
                                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                                    <a-form layout="inline" class="search-form" >
                                        <a-form-item >
                                            <a-button class="blue-btn" type="primary" @click="editWorkExperience(row,false)">编辑</a-button>
                                        </a-form-item>
                                        <a-form-item >
                                            <a-button class="blue-btn" type="primary" @click="editWorkExperience(row,true)">查看</a-button>
                                        </a-form-item>
                                    </a-form>
                                </template>
                            </commpVxeTable>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="专业技术培训记录">
                    <div class="personal-info-content">
                        <div style="width: 100%;">
                            <commpVxeTable
                            :key="trainingRecordsKey"
                            :config="trainingRecordsConfig" 
                            :columns="trainingRecordsColumnsVxe" 
                            :formItem="trainingRecordsFormItem"
                            @checkboxChange="checkboxChange"
                            ref="trainingTableRef"
                            @searchEvent="searchEvent"
                            @resetEvent="$event=>{trainingRecordsConfig.paramet={year:moment().format('YYYY')};trainingSearchYear=''}"
                            >
                                <template v-slot:year_slotName="{data}">
                                    <a-date-picker mode="year" format='YYYY' v-model="trainingSearchYear" 
                                    @panelChange="($event)=>{ trainingSearchYear = $event;trainingRecordsConfig.paramet={...trainingRecordsConfig.paramet,year:moment(trainingSearchYear).format('YYYY')}}" />
                                </template>
                                <template v-slot:fpxkssj_slotName="{data}">
                                    <a-date-picker format='YYYY-MM-DD' v-model:value="trainingfpxkssj" 
                                    @change="($event)=>{ trainingfpxkssj = $event;trainingRecordsConfig.paramet={...trainingRecordsConfig.paramet,fpxkssj:moment(trainingfpxkssj).format('YYYY-MM-DD')}}" />
                                </template>
                                <template v-slot:fpxjssj_slotName="{data}">
                                    <a-date-picker format='YYYY-MM-DD' v-model:value="trainingfpxjssj" 
                                    @change="($event)=>{ trainingfpxjssj = $event;trainingRecordsConfig.paramet={...trainingRecordsConfig.paramet,fpxjssj:moment(trainingfpxjssj).format('YYYY-MM-DD')}}" />
                                </template>

                                <template v-slot:externalOperations="{data}">
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="blue-btn" type="primary" @click="addTraining({},false)">添加</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="red-btn" type="primary" @click="batchDelete()">批量删除</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="blue-btn" type="primary" @click="exportTraining()">导出</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-button class="blue-btn" type="primary" @click="exportTemplateTraining()">导出模板</a-button>
                                        </template>
                                    </vxe-form-item>
                                    <vxe-form-item>
                                        <template>
                                            <a-upload style="display: inline-block;" :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="importTraining">
                                                <a-button class="blue-btn" type="primary" >导入</a-button>
                                            </a-upload>
                                        </template>
                                    </vxe-form-item>
                                </template>
                                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                                    <a-form layout="inline" class="search-form" >
                                        <a-form-item >
                                            <a-button class="blue-btn" type="primary" @click="editTraining(row,false)">编辑</a-button>
                                        </a-form-item>
                                        <a-form-item >
                                            <a-button class="blue-btn" type="primary" @click="editTraining(row,true)">查看</a-button>
                                        </a-form-item>
                                    </a-form>
                                </template>
                            </commpVxeTable>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="4" tab="审评类型">
                    <div class="personal-info-content">
                        <div style="width: 100%;">
                            <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                                <!-- 证书编号xxxxxxxxxxxxxx      兼职情况xxxxxxxxx     证书有效期至xxxxxxxx -->
                                <!-- border: 1px solid #d9d9d9;border-radius: 20px; padding: 10px 0;-->
                                <span style="display: inline-block;margin-top: 10px;" >
                                    <a-form layout="inline" class="personal-info-lb-form" >
                                        <a-form-item label="证书编号">
                                            <a-input placeholder="请输入证书编号" v-model:value="fromState.fjcyzsbh"/>
                                        </a-form-item>
                                        <a-form-item label="兼职情况">
                                            <a-input placeholder="请输入兼职情况" v-model:value="fromState.fjcyjzqk"/>
                                        </a-form-item>
                                        <a-form-item label="证书有效期至">
                                            <a-date-picker placeholder="请输入证书有效期至" v-model:value="fromState.fjcyzsyxq"/>
                                        </a-form-item>
                                    </a-form>
                                    
                                </span>
                                <div style="display: flex;justify-content: center;margin-top: 10px;">
                                    <a-button class="blue-btn" type="primary" @click="saveClick({
                                        fjcyzsbh:fromState.fjcyzsbh,
                                        fjcyjzqk:fromState.fjcyjzqk,
                                        fjcyzsyxq:moment(fromState.fjcyzsyxq).format('YYYY-MM-DD'),
                                    })">保存</a-button>
                                </div>
                            </div>
                            <div v-if="categoryList.length" style="display: flex;flex-wrap: wrap;">
                                <div v-for="(item,index) in categoryList" :key="(index+1)+''" style="width: 32%;min-width: 310px;margin: 5px 0.5%;display: flex;flex-direction: column;">
                                    
                                    <div style="border: 1px solid #d9d9d9;border-radius: 10px;height: 100%;flex: 1;">
                                        <h3 style="width: 100%;text-align: center;font-weight: 500;padding: 5px 0;">{{ item.jcy.flx }}</h3>
                                        <a-form layout="inline" class="personal-info-lb-form" >
                                            <a-form-item label="专业特长" class="zytc-item-f">
                                                <!-- <compSelector
                                                    :width="182"
                                                    v-model="item.jcy.fxllx"
                                                    :defaultValue="item.jcy.fxllx"
                                                    compType="Select"
                                                    dictionaryType="审评员序列类型代码"
                                                /> -->
                                                <a-checkbox-group  v-model="item.fszly">
                                                    <a-checkbox v-for="(trem,tIndex) in item.typeList" :value="trem" :key="tIndex">
                                                        {{ trem }}
                                                    </a-checkbox>
                                                </a-checkbox-group>
                                            </a-form-item>
                                            <br/>
                                            <a-form-item label="所属库">
                                                <!-- <a-input disabled placeholder="请输入所属库" v-model:value="item.jcy.fssk"/> -->
                                                <!-- <compSelector
                                                    v-model="item.jcy.fssk"
                                                    :defaultValue="item.jcy.fssk"
                                                    compType="Select"
                                                    dictionaryType="核查员所属库"
                                                /> -->
                                                <span>{{ item.jcy.fssk }}</span>
                                            </a-form-item>
                                            <br/>
                                            <a-form-item label="层级">
                                                <!-- <compSelector
                                                    :width="182"
                                                    v-model="item.jcy.flevel"
                                                    :defaultValue="item.jcy.flevel"
                                                    compType="Select"
                                                    dictionaryType="核查员等级代码"
                                                /> -->
                                                <span>{{ item.jcy.flevel }}</span>
                                            </a-form-item>
                                            <br/>
                                            <a-form-item label="受聘时间">
                                                <a-date-picker style="width: 182px;" v-model:value="item.fspsj"/>
                                            </a-form-item>
                                            <br/>
                                            <a-form-item >
                                                <div style="margin: 15px 0 10px 110px;">
                                                    <a-button class="blue-btn" type="primary" @click="saveCategory(item)">保存</a-button>
                                                    <a-button v-if="editOrNot" style="margin-left: 15px;" class="blue-btn" type="primary" @click="modifyAffiliation(item)">修改所属库</a-button>
                                                    <a-button v-if="editOrNot" style="margin-left: 15px;" class="blue-btn" type="primary" @click="modifyState(item)">修改有效状态</a-button>
                                                </div>
                                                
                                            </a-form-item>
                                        </a-form>
                                    </div>
                                </div>
                            </div>
                            <div v-else style="margin-top: 100px;">
                                <a-empty  />
                            </div>
                            
                            <a-modal
                                :title="inspectorState.type == 'fssk'?'修改所属库':'修改有效状态'"
                                :visible="inspectorVisible"
                                @ok="inspectorhandleOk"
                                @cancel="inspectorVisible = false"
                            >
                                <a-form layout="inline" >
                                    <a-form-item label="所属库" v-if="inspectorState.type == 'fssk'">
                                        <!-- <a-select
                                            style="width: 182px;"
                                            v-model:value="additionalState.fgzzt" 
                                            v-decorator="['fgzzt', { initialValue:additionalState.fgzzt, rules: rules.fgzzt}]"
                                            >
                                            <a-select-option v-for="(item,index) in dutyStatus" :value="item.itemValue" :key="index">{{ item.itemText }}</a-select-option>
                                        </a-select> -->
                                        <compSelector
                                            :key="compSelectorKey"
                                            v-model="inspectorState.fssk"
                                            :defaultValue="inspectorState.fssk"
                                            compType="Select"
                                            dictionaryType="核查员所属库"
                                        />
                                        
                                    </a-form-item>
                                    <a-form-item label="有效状态" v-if="inspectorState.type == 'fstate'">
                                        <compSelector
                                            :key="compSelectorKey"
                                            v-model="inspectorState.fstate"
                                            :defaultValue="inspectorState.fstate"
                                            compType="Select"
                                            separateAreas="hcyyxzt001"
                                            dictionaryType="核查员有效状态"
                                        />
                                    </a-form-item>
                                </a-form>
                            </a-modal>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="5" tab="选派记录">
                    <div class="personal-info-content">
                        <!-- myJbxxqueryMyXpjl -->
                        <div style="width: 100%;">
                            <commpVxeTable
                            :key="selectionRecordKey"
                            :config="selectionRecordConfig" 
                            :columns="selectionRecordColumnsVxe" 
                            :formItem="formItem"
                            @resetEvent="$event=>{selectionRecordConfig.paramet={year:moment().format('YYYY')};selectionSearchYear=''}"
                            >
                                <template v-slot:year_slotName="{data}">
                                    <a-date-picker mode="year" format='YYYY' v-model="selectionSearchYear" 
                                    @panelChange="($event,val)=>{ selectionSearchYear = $event;selectionRecordConfig.paramet={...selectionRecordConfig.paramet,year:moment(selectionSearchYear).format('YYYY')}}" />
                                </template>
                            </commpVxeTable>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-spin>
        <a-modal
            :title="additionalState.type == 'username'?'修改登录账号':'修改执勤状态'"
            :visible="additionalVisible"
            @ok="handleOk"
            @cancel="additionalVisible = false"
        >
            <a-form layout="inline" :form="additionalform">
                <a-form-item label="登录账号" v-if="additionalState.type == 'username'">
                    <a-input
                     placeholder="请输入登录账号" 
                     v-model:value="additionalState.username"
                     v-decorator="['username', { initialValue:additionalState.username, rules: rules.username}]"
                    />
                </a-form-item>
                <a-form-item label="执勤状态" v-if="additionalState.type == 'fgzzt'">
                    <a-select
                    style="width: 182px;"
                     v-model:value="additionalState.fgzzt" 
                     v-decorator="['fgzzt', { initialValue:additionalState.fgzzt, rules: rules.fgzzt}]"
                    >
                        <a-select-option v-for="(item,index) in dutyStatus" :value="item.itemValue" :key="index">{{ item.itemText }}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
        <trainingRecords ref="trainingRecordsRef" @sussecTraining="sussecTraining" />
        <workExperience ref="workExperienceAddRef" @sussecWorkExperience="sussecWorkExperience" />
        <changeUnit ref="changeUnitRef" />
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import {
    spcyMyInfoQueryMyJbxx,
    myJbxxUpdateUser,
    myJbxxdownMyQm,
    myJbxxuploadMyQm,
    resetHcyPwd,
    modifyHcyAccount,
    modifyHcyGzzt,
    ocalityPostAction,
    sysUserPxjldeleteBatch,
    sysUserPxjlexportUserPxjlData,
    sysUserPxjldownUserPxjlTemplate,
    sysUserPxjlimpPxjlData,
    updateHcy,
    modifyHcySsk,
    modifyHcyState,
    sysUserGzjldeleteBatch,
    sysUserGzjldownUserGzjlTemplate,
    sysUserGzjlexportUserGzjlData,
    sysUserGzjlimpGzjlData,
} from './service/index'
import compSelector from '@/components/compSelector/compSelector.vue'
import validator from '@/common/validator'
import blobType from '@/common/blobType'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import trainingRecords from './trainingRecords.vue'
import workExperience from './workExperience.vue'
import moment from 'moment'
import changeUnit from './changeUnit.vue'
export default {
    components:{
        compSelector,
        commpVxeTable,
        trainingRecords,
        workExperience,
        changeUnit,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            editOrNot:false,
            additionalVisible:false,
            fromState:{},
            additionalState:{},
            compSelectorkey:null,
            compSelectorKey:null,
            basicInformationKey:null,
            form: this.$form.createForm(this, { name: 'personalInfoFrom' }),
            additionalform:this.$form.createForm(this, { name: 'additionalform' }),
            rules:{
                fsfzh: [{
                    required: true,
                    message: '请输入身份证号',
                    // trigger: 'blur',
                },{
                    pattern: validator.isIdCard.reg,
                    message: '请输入正确的身份证号',
                    // trigger: 'blur',
                }],
                phone: [{
                    required: true,
                    message: '请输入手机号码',
                    // trigger: 'blur',
                },{
                    pattern: validator.isPhone.reg,
                    message: '请输入正确的手机号码',
                    // trigger: 'blur',
                }],
                fgzdw:[{
                    required: true,
                    message: '请输入工作单位',
                    // trigger: 'blur',
                }],
                username:[{
                    required: true,
                    message: '请输入账号',
                    // trigger: 'blur',
                }],
                fgzzt:[{
                    required: true,
                    message: '请选择执勤状态',
                    // trigger: 'blur',
                }],
            },
            tipText:'正在加载中...',
            spinning:false,
            dutyStatus:[],
            formItem:[{
                label: '年份',
                model: 'year',
                slotName:'year_slotName',
            }],//
            trainingRecordsFormItem:[{
                label: '认定内容',
                model: 'fpxmc',
            },{
                label: '开始日期',
                model: 'fpxkssj',
                slotName:'fpxkssj_slotName',
            },{
                label: '结束日期',
                model: 'fpxjssj',
                slotName:'fpxjssj_slotName',
            },{
                label: '年度',
                model: 'year',
                slotName:'year_slotName',
            }],//
            trainingRecordsKey:null,
            trainingSearchYear:moment().format('YYYY'),
            trainingfpxkssj:'',
            trainingfpxjssj:'',
            trainingRecordsConfig:{
                api: assessCheckApi.sysUserPxjlqueryPageList,
                rowId: 'id',
                height:520,
                paramet:{
                    year:moment().format('YYYY'),
                }
            },
            trainingRecordsColumnsVxe: [{ 
                    type: 'checkbox', 
                    width: 60 ,
                    fixed: 'left'
            },{
                title: "年度",
                field: "fjlnd",
                width:72,
            },{
                title: "认定内容",
                field: "fpxmc",
            },{
                title: "开始日期",
                field: "fpxkssj",
                width:141,
            },{
                title: "结束日期/获得日期",
                field: "fpxjssj",
                width:141,
            },{
                title: "学时",
                field: "fpxxs",
                width:72,
            },{
                title: "认定类型",
                field: "fpxlx",
            },{
                title: "操作",
                field: "id",
                width:180,
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                
            }],
            selectedRowKeysArr:[],

            //审评员
            submitActiveKey:['1','2','3','4','5'],
            experienceKey:['1','2'],
            categoryList:[],
            inspectorState:{},
            inspectorVisible:false,
            certificate:{},
            //选派记录
            selectionRecordKey:null,
            selectionSearchYear:moment().format('YYYY'),
            selectionRecordConfig:{
                api: assessCheckApi.myJbxxqueryMyXpjl,
                rowId: 'id',
                height:520,
                paramet:{
                    year:moment().format('YYYY'),
                }
            },
            selectionRecordColumnsVxe: [{
                type: "seq",
                title: "序号",
                width: "60",
            },{
                title: "审评员姓名",
                field: "fjcyxm",
            },{
                title: "选派类型",
                field: "fxplx",
            },{
                title: "任务类型",
                width: "60",
                field: "frwlx",
            },{
                title: "指派人名称",
                field: "fzprmc",
            },{
                title: "审评开始时间",
                field: "fcykssj",
            },{
                title: "审评结束时间",
                field: "fcyjssj",
            },{
                title: "指派时间",
                field: "fzpsj",
            },{
                title: "是否组长",
                field: "fssk",
            },{
                title: "选派方式",
                field: "fxpfs",
            },{
                title: "所属审评机构",
                field: "fssjcjg",
            },{
                title: "是否同意选派",
                field: "fsftyxp",
            },{
                title: "原因说明",
                field: "fbtyyy",
            }],
            workExperienceRowKeysArr:[],
            workExperienceSearchFrom:{},
            workExperienceKey:null,
            workSearchYear:'',
            workExperienceConfig:{
                api: assessCheckApi.sysUserGzjlqueryPageList,
                rowId: 'id',
                height:520,
                paramet:{
                }
            },
            workExperienceColumnsVxe:[{ 
                    type: 'checkbox', 
                    width: 60 ,
                    fixed: 'left'
            },{
                type: "seq",
                title: "序号",
                width: "60",
            },,{
                title: "工作单位",
                field: "fgzdw",
            },{
                title: "工作开始时间",
                field: "fgzkssj",
            },{
                title: "工作结束时间",
                field: "fgzjssj",
            },{
                title: "工作岗位",
                field: "fcsgz",
            },{
                title: "职务",
                field: "fzw",
            },{
                title: "操作",
                field: "id",
                width:180,
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    created(){
        this.getData(this.fromState.id,this.editOrNot)
    },
    methods:{
        getData(val,isEdit){
            this.editOrNot = isEdit
            let data = {}
            if(val){
                data = {fuserid:val}
            }
            this.spinning = true
            spcyMyInfoQueryMyJbxx(data).then(res=>{
                //console.log(res.result)
                if(res.code == 200){
                    res.result.user.sex = res.result.user.sex?String(res.result.user.sex):''
                    this.fromState = res.result.user
                    this.fromState.fjcyzsyxq = this.fromState.fjcyzsyxq?moment(this.fromState.fjcyzsyxq):''
                    this.categoryList = res.result.jcyList.length?res.result.jcyList.map(item=>{return{
                        ...item,typeList:item.typeList?item.typeList.split(','):[],
                        fszly:item.jcy.fszly?item.jcy.fszly.split(','):[],
                        fspjssj:item.jcy.fspjssj?moment(item.jcy.fspjssj):'',
                        fspsj:item.jcy.fspsj?moment(item.jcy.fspsj):'',
                    }}):[]
                    this.additionalState = { username:res.result.user.username, fgzzt:res.result.user.fgzzt, }
                    this.trainingRecordsConfig.paramet = {...this.trainingRecordsConfig.paramet,fuserid:this.fromState.id}
                    this.selectionRecordConfig.paramet = {...this.selectionRecordConfig.paramet,fuserid:this.fromState.id}
                    this.workExperienceConfig.paramet = {...this.workExperienceConfig.paramet,fuserid:this.fromState.id}
                    this.spinning = false
                }else{
                    this.spinning = false
                    this.$message.warning(res.message)
                }
                
                
            })
            this.compSelectorkey = Date.now()
            ocalityPostAction({dictName:'核查员工作状态'}).then(res=>{
                if(res.code == 200){
                    //console.log(res)
                    this.dutyStatus = res.result
                }
            })
        },
        saveClick(data){
            this.form.validateFields((err, values) => {
                if(!err){
                    this.spinning = true
                    this.tipText = '正在提交中...'
                    myJbxxUpdateUser({id:this.fromState.id,...data,...values}).then(res=>{
                        if(res.code == 200){
                            this.spinning = false
                            this.$message.success(res.message)
                        }else{
                            this.spinning = false
                            this.$message.warning(res.message)
                        }
                        
                        this.getData(this.fromState.id,this.editOrNot)
                        this.basicInformationKey = Date.now()
                    })
                }
            })
        },
        exportSignature(){
            myJbxxdownMyQm({id:this.fromState.id}).then((data) => {
                if(data.size){
                    let index = blobType.suffix.indexOf('.png')
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([data], { type: blobType.type[index] }), '个人签名.png')
                    } else {
                        let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[index] }))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', '个人签名' + '.png')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link) //下载完成移除元素
                        window.URL.revokeObjectURL(url) //释放掉blob对象
                    }
                }else{
                    this.$message.warning('导出失败或当前暂无签名')
                }
                
            })

        },
        beforeUpload(e){
            return false
        },
        importSignature({file}){//导入
            var that = this
            if(typeof file.uid !== 'undefined') {
                if(file.name.indexOf('.png') !== -1 || file.name.indexOf('.jpg') !== -1 || file.name.indexOf('.jpeg') !== -1){
                    const fileData = new FormData();
                    fileData.append("file",file);
                    fileData.append("id",this.fromState.id);
                    fileData.append("fywflcode",blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))]);
                    myJbxxuploadMyQm(fileData).then(res => {
                        
                        that.$message.success('导入成功')
                    }).catch(error =>{
                        that.$message.success('导入失败')
                    })
                }else{
                    this.$message.warning('请上传图片类型')
                }
            }
        },
        resetPassword(){
            var that = this
            this.$confirm({
                title:'您确认要重置密码吗？',
                onOk() {
                    resetHcyPwd({fuserid:this.fromState.id}).then(res=>{
                    if(res.code == 200){
                        that.$message.success(res.message)
                    }else{
                        that.$message.warning(res.message)
                    }
                    })
                },
                
            });
        },
        modifyAccount(){
            this.additionalVisible = true
            this.additionalState.type = 'username'
        },
        modifyDuty(){
            this.additionalVisible = true
            this.additionalState.type = 'fgzzt'
        },
        //变更工作单位
        changeWorkUnit(title,isDisabled){
            this.$refs.changeUnitRef.getData({isDisabled:isDisabled})
            this.$refs.changeUnitRef.visible = true
        },
        handleOk(){
            this.additionalform.validateFields((err, values) => {
                if(!err){
                    if(this.additionalState.type == 'username'){
                        let that = this
                        this.$confirm({
                            title:'确认修改账号吗？',
                            onOk() {
                                modifyHcyAccount({fuserid:that.fromState.id,username:that.additionalState.username}).then(res=>{
                                    if(res.code == 200){
                                        that.getData(that.fromState.id,that.editOrNot)
                                        that.additionalVisible = false
                                        that.$message.success(res.message)
                                    }else{
                                        that.$message.warning(res.message)
                                    }
                                })
                            }
                        })
                        
                    }else if(this.additionalState.type == 'fgzzt'){
                        modifyHcyGzzt({fuserid:this.fromState.id,fgzzt:this.additionalState.fgzzt}).then(res=>{
                            if(res.code == 200){
                                this.getData(this.fromState.id,this.editOrNot)
                                this.additionalVisible = false
                                this.$message.success(res.message)
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }
            })
        },
        //培训记录---
        checkboxChange(val){
            this.selectedRowKeysArr = []
            val.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        addTraining(row,val){//添加
            this.$refs.trainingRecordsRef.visible = true
            this.$refs.trainingRecordsRef.getData(row,val)
        },
        batchDelete(){
            let that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要删除吗？',
                    onOk() {
                        sysUserPxjldeleteBatch({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.$refs.trainingTableRef.searchEvent()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请选择删除项')
            }
        },
        searchEvent(val1,val2){
            this.searchFrom = {...val1,...val2}
        },
        exportTraining(){//导出
            var that = this
            var fileName = '培训记录'
            let param = { }
            if(that.selectedRowKeysArr.length){
                param = {
                    ids:that.selectedRowKeysArr.join(',')
                }
            }else{
                param = this.searchFrom
            }
            
            sysUserPxjlexportUserPxjlData(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })

        },
        exportTemplateTraining(){//导出模板
            var fileName = '培训记录模板'
            sysUserPxjldownUserPxjlTemplate().then(data=>{
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        importTraining({file}){//导入
            var that = this
            if(typeof file.uid !== 'undefined') {
                if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
                    const fileData = new FormData();
                    fileData.append("file",file);
                    fileData.append("fuserid",this.fromState.id);
                    sysUserPxjlimpPxjlData(fileData).then(res => {
                        // this.$refs.trainingTableRef.searchEvent()
                        this.trainingRecordsKey = Date.now()
                        that.$message.success('导入成功')
                    }).catch(error =>{
                        that.$message.success('导入失败')
                    })
                }
                
            }
        },
        editTraining(row,val){//编辑
            this.$refs.trainingRecordsRef.visible = true
            this.$refs.trainingRecordsRef.getData(row,val)
        },
        // deleteTraining(){//删除

        // },
        
        sussecTraining(){
            this.$refs.trainingTableRef.searchEvent()
        },
        //工作经历
        workExperiencecheckboxChange(){
            this.workExperienceRowKeysArr = []
            val.forEach(item => {
                this.workExperienceRowKeysArr.push(item.id)
            });
        },
        workExperienceSearchEvent(val1,val2){
            this.workExperienceSearchFrom = {...val1,...val2}
        },
        sussecWorkExperience(){
            this.$refs.workExperienceRef.searchEvent()
        },
        addWorkExperience(row,val){
            this.$refs.workExperienceAddRef.visible = true
            this.$refs.workExperienceAddRef.getData(row,val)
        },
        deleteWorkExperience(){
            let that = this
            if(this.workExperienceRowKeysArr.length){
                this.$confirm({
                    title:'确认要删除吗？',
                    onOk() {
                        sysUserGzjldeleteBatch({ids:that.workExperienceRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.$refs.workExperienceRef.searchEvent()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请选择删除项')
            }
        },
        exportWorkExperience(){
            var that = this
            var fileName = '工作经历'
            let param = { }
            if(that.workExperienceRowKeysArr.length){
                param = {
                    ids:that.workExperienceRowKeysArr.join(',')
                }
            }else{
                param = this.workExperienceSearchFrom
            }
            
            sysUserGzjlexportUserGzjlData(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        exportTemplateWorkExperience(){
            var fileName = '工作经历模板'
            sysUserGzjldownUserGzjlTemplate().then(data=>{
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        importWorkExperience(){
            var that = this
            if(typeof file.uid !== 'undefined') {
                if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
                    const fileData = new FormData();
                    fileData.append("file",file);
                    fileData.append("fuserid",this.fromState.id);
                    sysUserGzjlimpGzjlData(fileData).then(res => {
                        // this.$refs.trainingTableRef.searchEvent()
                        this.trainingRecordsKey = Date.now()
                        that.$message.success('导入成功')
                    }).catch(error =>{
                        that.$message.success('导入失败')
                    })
                }
                
            }
        },
        editWorkExperience(row,val){
            this.$refs.workExperienceAddRef.visible = true
            this.$refs.workExperienceAddRef.getData(row,val)
        },
        
        //审评类型
        saveCategory(item){
            let data = {
                ...item.jcy,
                fszly:item.fszly.length?item.fszly.join(','):'',
                fspsj:item.fspsj?moment(item.fspsj).format('YYYY-MM-DD'):'',
                fspjssj:item.fspjssj?moment(item.fspjssj).format('YYYY-MM-DD'):'',

            }
            updateHcy(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getData(this.fromState.id,this.editOrNot)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        
        modifyAffiliation(item){
            //console.log(item)
            this.inspectorState = {id:item.id,fssk:item.jcy.fssk,type:'fssk'}
            this.inspectorVisible = true
            this.compSelectorkey = Date.now()
            
        },
        modifyState(item){
            this.inspectorState = {id:item.id,fstate:item.jcy.fstate,type:'fstate'}
            this.inspectorVisible = true
            this.compSelectorkey = Date.now()
        },
        inspectorhandleOk(){
            if( this.inspectorState.type == 'fssk'){
                modifyHcySsk(this.inspectorState).then(res=>{
                    if(res.code == 200){
                        this.getData(this.fromState.id,this.editOrNot)
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else if(this.inspectorState.type == 'fstate'){
                modifyHcyState(this.inspectorState).then(res=>{
                    if(res.code == 200){
                        this.getData(this.fromState.id,this.editOrNot)
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
    }
}
</script>
<style lang="less">
.personal-info-index{
    // background: #fff;
    height: 100%;
    overflow: hidden;
    .ant-tabs-tab{
        font-weight: 600;
        font-size: 16px;
    }
    .ant-tabs-bar{
        margin: 0;
        background-color: #fff;
    }
    .ant-tabs-nav .ant-tabs-tab{
        margin-right: 5px;
    }
    .personal-info-content{
        height: calc(100vh - 48px - 116px - 20px);
        overflow-y: auto;
        display: flex;
        justify-content: center;
        margin: 10px 0;
        // padding: 0 10px;
        background: #fff;
        .personal-info-form{
            .ant-form-item{
                margin: 5px 0;
            }
            .ant-form-item-label{
                width: 112px;
            }
            .flex-w-er{
                width: 590px;
                .ant-form-item-control-wrapper{
                    width: calc(100% - 112px);
                }
            }
            .flex-w-yi{

            }
        }
        
        .ant-input-disabled{
            color: rgba(0, 0, 0, 0.65);
        }
        .personal-info-lb-form{
            .ant-form-item-label{
                width: 100px;

            }
            .zytc-item-f{
                display: flex;
                .ant-form-item-control-wrapper{
                    flex: 1;
                }
            }
        }
        .ant-card-body{
            padding: 5px;
        }
        .personal-info-b-card{

        }
        .ben-personal-info{
            .ant-form-item-label{
                width: 80px;
            }
        }
    }
}
</style>